<div class="breadcrumbs breadcrumbs-fixed ace-save-state">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-users home-icon"></i>
            <a href="#">用户管理</a>
        </li>
        <li class="active">用户列表</li>
    </ul>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="header smaller lighter blue">APP用户列表</h4>
            <div class="row">
                <div class="col-xs-9">
                    <a id="batchUnlock" href="javascript:;" class="btn btn-xs btn-info">
                        <i class="fa fa-unlock"></i> 批量启用
                    </a>
                    <a id="batchLock" href="javascript:;" class="btn btn-xs btn-danger">
                        <i class="fa fa-lock"></i> 批量禁用
                    </a>
                </div>
                <div class="col-xs-3 pull-right">
                    <form class="form-horizontal">
                        <div class="input-group">
                            <input id="account" class="form-control input-sm" type="text" placeholder="小语账号/手机号/邮箱"/>
                            <span class="input-group-btn">
                                <button id="searchBtn" class="btn btn-xs btn-info" type="button">
                                    <i class="ace-icon fa fa-search"></i> 搜索
                                </button>
					        </span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="space-6"></div>
            <div class="dataTables_wrapper form-inline no-footer">
                <table id="appuser-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th class="center">
                            <label class="pos-rel">
                                <input type="checkbox" class="ace">
                                <span class="lbl"></span>
                            </label>
                        </th>
                        <th>小语账号</th>
                        <th>昵称</th>
                        <th>登录方式</th>
                        <th>绑定手机</th>
                        <th>绑定邮箱</th>
                        <th>状态</th>
                        <th>注册时间</th>
                        <th>绑定的设备</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var appuser_table;
        $(function () {
            appuser_table = $('#appuser-table').DataTable({
                language: {url: 'ace/json/dataTable_CN.json'},
                autoWidth: false,
                ordering: false,
                searching: false,
                serverSide: true,
                processing: true,
                deferRender: true,
                responsive: true,
                ajax: {
                    url: 'management/appUserList'
                },
                columns: [
                    {
                        data: function (row) {
                            return '<div class="center"><label class="pos-rel"><input type="checkbox" name="bathBox" data-id="' + row.id + '" class="ace"><span class="lbl"></span></label></div>';
                        }
                    },
                    {
                        data: 'account',
                        defaultContent: ''
                    }, {
                        data: 'username',
                        defaultContent: ''
                    }, {
                        data: function (row) {
                            if (row.thirdType) {
                                switch (row.thirdType) {
                                    case 1:
                                        return '<div class="center"><i style="font-size: 24px;" class="fa fa-qq" aria-hidden="true"></i></div>';
                                    case 2:
                                        return '<div class="center"><i style="font-size: 24px;" class="fa fa-wechat" aria-hidden="true"></i></div>';
                                    case 3:
                                        return '<div class="center"><i style="font-size: 24px;" class="fa fa-weibo" aria-hidden="true"></i></div>';
                                }
                            }
                            return '<div class="center"><i style="font-size: 24px;" class="fa fa-mobile-phone" aria-hidden="true"></i></div>';
                        }
                    }, {
                        data: 'mobile',
                        defaultContent: ''
                    }, {
                        data: 'email',
                        defaultContent: ''
                    }, {
                        data: function (row) {
                            return row.status ? "<label class='label label-success arrowed'><i class='fa fa-unlock'></i> 启用</label>" : "<label class='label label-danger arrowed-in'><i class='fa fa-lock'></i> 禁用</label>";
                        }
                    }, {
                        data: 'createTime',
                        defaultContent: ''
                    }, {
                        data: function (row) {
                            return '<a href="#" class="btn btn-xs btn-info"><i class="fa fa-search-plus bigger-120"></i> 查看</a>';
                        }
                    }, {
                        data: function (row) {
                            var btns = row.status ? '<a id="lockUser" href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-danger"><i class="fa fa-lock"></i> 禁用</a>' : '<a id="unlockUser" href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-success"><i class="fa fa-unlock"></i> 启用</a>';
                            btns += "&nbsp;&nbsp;<a id='resetPwd' href='javascript:;' data-id='" + row.id + "' class='btn btn-xs btn-warning'><i class='fa fa-undo'></i> 重置密码</a>";
                            return btns;
                        }
                    }
                ]
            });

            $('#searchBtn').click(function () {
                var account = $('#account').val();
                appuser_table.ajax.url("management/appUserList?account=" + account).load();
            });

            $('#appuser-table').find('> thead > tr > th input[type=checkbox]').eq(0).on('click', function () {
                $('#appuser-table').find('tbody > tr').find('input:checkbox').prop("checked", this.checked);
            });

            $('#appuser-table tbody').on('click', 'a#lockUser', function () {
                var id = $(this).data("id");
                bootbox.confirm("你确定要禁用这个用户？", function (r) {
                    if (r) {
                        $.post('management/updateAppUserStatus', {id: id, status: false}, function () {
                            appuser_table.ajax.reload();
                        });
                    }
                });
            });

            $('#batchLock').click(function () {
                var ids = [];
                $('#appuser-table').find('tbody > tr').find('input:checkbox').each(function (i) {
                    if (this.checked) {
                        ids.push($(this).data("id"));
                    }
                });
                if (ids.length > 0) {
                    bootbox.confirm("你确定要禁用已选中的用户？", function (r) {
                        if (r) {
                            $.post('management/updateAppUserStatus', {id: ids, status: false}, function () {
                                $('#appuser-table').find('> thead > tr > th input[type=checkbox]').prop("checked", false);
                                appuser_table.ajax.reload();
                            });
                        }
                    });
                }
            });

            $('#batchUnlock').click(function () {
                var ids = [];
                $('#appuser-table').find('tbody > tr').find('input:checkbox').each(function () {
                    if (this.checked) {
                        ids.push($(this).data("id"));
                    }
                });
                if (ids.length > 0) {
                    bootbox.confirm("你确定要启用已选中的用户？", function (r) {
                        if (r) {
                            $.post('management/updateAppUserStatus', {id: ids, status: true}, function () {
                                $('#appuser-table').find('> thead > tr > th input[type=checkbox]').prop("checked", false);
                                appuser_table.ajax.reload();
                            });
                        }
                    });
                }
            });

            $('#appuser-table tbody').on('click', 'a#unlockUser', function () {
                var id = $(this).data("id");
                bootbox.confirm("你确定要启用这个用户？", function (r) {
                    if (r) {
                        $.post('management/updateAppUserStatus', {id: id, status: true}, function () {
                            appuser_table.ajax.reload();
                        });
                    }
                });
            });

            $('#appuser-table tbody').on('click', 'a#resetPwd', function () {
                var id = $(this).data("id");
                bootbox.confirm("你确定要初始化这个用户的密码？", function (r) {
                    if (r) {
                        $.post('management/resetAppUserPwd', {id: id, status: true}, function () {
                            appuser_table.ajax.reload();
                        });
                    }
                });
            });
        });
    </script>
</div>